<template>
  <div class="w-[750px]">
    <van-search v-model="searchValue" placeholder="搜索" />
    <van-tabs v-model:active="activeTab">
      <van-tab title="全部"></van-tab>
      <van-tab title="进行中"></van-tab>
    </van-tabs>
    <div v-for="(activity, index) in activities" :key="index" class="bg-white rounded-lg p-4 mb-4">
      <h2 class="text-sm text-[#333]">{{ activity.title }}</h2>
      <img :src="activity.image" alt="活动图片" class="w-[750px]" />
      <div class="flex justify-between mt-4">
        <span class="text-[#999]">报名结束</span>
        <span class="text-[#999] bg-[#ccc] px-4 py-1 rounded">活动结束</span>
      </div>
    </div>
    <div class="text-center text-[#999]">没有更多了</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Search, Tabs, Tab } from 'vant';

export default defineComponent({
  components: {
    VanSearch :Search,
    VanTabs:Tabs,
    VanTab:Tab,
  },
  setup() {
    const searchValue = ref('');
    const activeTab = ref(0);
    const activities = [
      {
        title: '4月18日青秀山遇见浪漫联谊活动',
        image: 'path/to/image1.jpg',
      },
      {
        title: '五一高质量单身联谊会',
        image: 'path/to/image2.jpg',
      },
    ];

    return {
      searchValue,
      activeTab,
      activities,
    };
  },
});
</script>

<style scoped>
/* 如果需要额外的样式，可以在这里添加 */
</style>